<template>
  <div class="classfiy_box">
     <div class="c_con" v-if="!type">
        <div v-for='(item,i,k) in classifyOptions'>
         <!-- <el-link class="class_link" :underline='false'> {{i}}</el-link> -->
         <el-menu
          mode="horizontal" @select="handleGrowth">
             <li class="el-menu-item  el-menu-demo class_ classify bold" solt='title'>{{i}}</li>
             <el-menu-item v-if="i!=='成长分类'" :class='"el-menu-demo class_ classify"' :index="i+'-'+' '+'-all'">{{all}}</el-menu-item>
             <el-menu-item :class='"el-menu-demo class_ classify"+k' :key="i+'-'+litem.itemName" :index="i+'-'+litem.itemName+'-'+litem.cateId" :default-active="0" v-for='(litem,c) in classifyOptions[i]'
             >{{litem.itemName}}</el-menu-item>
         </el-menu>
         <!-- <el-link  :class='"class_link classify"+k' :underline='false' v-for='(litem,i) in classifyOptions[i]' target="_blank">{{litem}}</el-link> -->
       </div>
     </div>
     <div class="c_con" v-else>
       <Category
         biz-type-enum="PREPARELESSON"
         :list="lessonForm"
         :gutter="20"
         :disabled="$route.query && $route.query.activityId ? true : false"
         :clearable="clearable"
         @Callback="categoryCallback"
       />
      <!-- <div v-for='(items,h,k) in classifyOptions'>
        <label for="">
           {{h}}
        </label>
       <el-select  v-model="selobj[h]" >
           <el-option v-for='(item,i,k) in classifyOptions[h]' :value="item.itemName">{{item.itemName}}</el-option>
       </el-select>

      </div> -->
     </div>
   </div>
</template>

<script>
import Category from '@/components/Category'
export default {
  name: 'ClassifyDessing',
  props: {
    type:{
    value:''
    },
    clearable:{
     default:false
    }
  },
  data(){
    return {
      classifyOptions:{},
      selectObj:[],
      selectAllArr:[],
      lessonForm:{

      },
      all:'all',
      categoryList:[]
    }
  },
  components:{
    Category
  },
  watch:{
  ['selectObj'](cate){

  },
  // selectAllArr(val){
  //     var thatVal = []

  //     for(var l in this.classifyOptions){
  //       if(l === val){
  //         this.classifyOptions[l].map(list=>{
  //           thatVal.push(list.itemName)
  //         })
  //       }
  //     }
  // this.$emit('conditionSelect',thatVal)
  //   }
  },
  created() {
    this.getClassify()
  },
  computed: {
    categoryNameLists(){
      const label =this.label
      if(label){
        this.list.map((item)=>item = item[label])
      }
      return this.list
    }

  },
  methods: {
    categoryCallback(val){
      console.log("val",val)
      var categoryVoList = []
      for(var ki in val){
        var bCate = val[ki]
        bCate.itemName = bCate.itemCode === '10001'?'TEACHER':bCate.itemCode === '10002'?'TRAINER':bCate.itemName
        if(bCate.cateId &&  bCate.itemCode&&bCate.itemCode
        ){
         categoryVoList.push(bCate.itemName)
        }
      }
      this.$emit('conditionSelect',categoryVoList)
    },
    getClassify(pCateId){
      const params = {
        bizTypeEnum: 'PREPARELESSON',
        pCateId
      }

      this.$store.dispatch("app/findByParentpCateId",params).then((data)=>{
        if(data.categoryVoList){

          let  category = data.categoryVoList[0]
          // this.$set(this.selectObj,data.groupName,'all')
          this.$set(this.classifyOptions,data.groupName,data.categoryVoList)

          //params.pCateId = category.cateId
           if(!category.node){
             this.getClassify(category.cateId)
           }
        }
      })
     },
    handleGrowth(key, keyPath) {
        var keyVal = key.split('-')
        var id = keyVal[2],itemName = keyVal[1]
        id!=='all'?this.getClassify(id):'';
        key=keyVal[0]
        let selectObj = this.selectObj

        const classifyOptions = this.classifyOptions

         console.log("init shu",key, keyPath,selectObj,classifyOptions);
        if(key){
           var n=-1
          for(var i in classifyOptions){
              n++;
            if(key.indexOf(i)>-1&&itemName!==' '){
              this.$set(selectObj,n, itemName)
            }else if(id==='all'){
             //selectObj.splice(n,1)
             delete selectObj[n]
            }else{
              //this.$set(selectObj,n, selectObj[n])
              // this.$set(selectObj,n, keyVal[1])
            }
          }
        }
        // for(var k in selectObj){
        //   selectObj[k]
        // }
         var categoryVoList = []
         categoryVoList
         selectObj.map(item=>{
           if(item){
             item = item === '学科教学'?'TEACHER':item === '教师成长'?'TRAINER':item
             categoryVoList.push(item)
             return
           }
         })
        // this.categoryList = selectObj.filter((item)=>{
        //    item = item === '学科教学'?'TEACHER':item === '教师成长'?'TRAINER':item
        //   return item !== null&&item!==undefined&&item!==''
        // })
        this.$emit('conditionSelect',categoryVoList)
        console.log('selectObj',categoryVoList);
    }
  }
}
</script>
<style lang="scss">

</style>
<style lang="scss">
.classfiy_box {
      margin: 20px 0;
      padding: 15px 18px;
      border: 1px solid #2EB06F;
      .class_link {
        padding: 5px;
        margin: 5px;
      }
    }
</style>
